<template>
  <div class="main_content">
    <div class="w870 left">
      <div class="iask13 iask13_q">
        <dl class="iask13_icon iask13_icon01">
          <dt>问</dt>
          <dd></dd>
        </dl>
        <dl class="iask13_title">
          <dt>{{ question.content }}</dt>
          <dd>
            {{ question.when }}
          </dd>
        </dl>
      </div>
      <!--答-->
      <div class="iask13 iask13_a">
        <dl class="iask13_icon iask13_icon03">
          <dt>答</dt>
          <dd></dd>
        </dl>
        <ul class="iask13_tip">
          因不能面诊，智能问答系统的建议仅供参考
        </ul>
        <ul class="iask13_con">
          <span>问题分析：</span><br>
          <div v-for="response in question.response">
            <div>{{ response }}</div>
            <br>
          </div>
        </ul>
      </div>
      <!--相关问题-->
      <div class="iask13 iask13_h">
        <dl class="iask13_icon iask13_icon04">
          <dt>相关问题</dt>
        </dl>
        <ul class="catalog02 iask02c">
          <li v-for="q in relativeQuestion">
            <router-link :to="{path:'/question',query:{mid:q.mid }}">{{ q.content }}</router-link>
          </li>

        </ul>
      </div>
      <!--最佳答案-->
    </div>
    <div class="w300 space02 right">
      <div class="border03" id="topAnswerBlock">
        <!--<ul style="clear:both;height:2px;background:rgba(54,158,255,0.51);overflow:hidden;"></ul>-->
        <div class="border02_tag">
          <ol></ol>
          <span></span>
          <em>最佳答案</em>
        </div>
        <div class="catalog05 iask05a" data-seq="1">
          <ul v-for="goodRes in goodResponseList">
            <p>
              <router-link :to="{path:'/question',query:{mid:goodRes.mid }}">{{ goodRes.content }}</router-link>
            </p>
          </ul>
        </div>

      </div>
    </div>
  </div>
</template>

<script>
import '../../../public/index_assert/common.css'
import '../../../public/index_assert/ask.css'
import {Loading} from "element-ui";

export default {
  name: "Question",
  data() {
    return {
      question: {},
      relativeQuestion: [],
      goodResponseList: []
    }
  },
  mounted() {
    let loading = Loading.service({fullscreen: true});
    //获取question信息
    this.getQuestionInfo((entity) => {
      //获取相关问题
      this.getRelativeQuestions(entity, 15)
    })
    //获取最佳回复
    this.getGoodResponse(10)
    loading.close()
  },
  methods: {
    getQuestionInfo(callback) {
      let mid = this.$route.query.mid
      //根据mid获取question
      this.$store.dispatch('getQuestionInfo', {mid}).then((res) => {
        this.question = res.question;
        callback(res.question.entity)
      })
    },
    getRelativeQuestions(entity, countQuestions) {
      this.$store.dispatch('getEntityQuestions', {entity, countQuestions}).then((res) => {
        this.relativeQuestion = res.entityQuestions.questions;
      })
    },
    getGoodResponse(count) {
      this.$store.dispatch('getGoodResponse', {count}).then((res) => {
        this.goodResponseList = res.goodResponseList;
      })
    }


  }
}
</script>

<style scoped>

.catalog05 span {
  display: none;
}

.iask05a p {
  width: 222px;
}

.zhuibox {
  margin-top: 16px;
}

.z_ask, .z_answer {
  position: relative;
  min-height: 28px;
  margin-bottom: 16px;
}

.z_ask span, .z_answer span {
  position: absolute;
  top: 0;
  left: 0;
  width: 50px;
  font-size: 16px;
}

.z_ask span {
  color: #4dc08f;
}

.z_answer span {
  color: #feac49;
}

.z_ask p, .z_answer p {
  display: inline-block;
  margin-left: 50px;
  padding: 2px 10px;
  background-color: #e4e4e4;
  border-radius: 10px;
  font-size: 16px;
  color: #000;
}

.iask13_q {
  border-top: 1px solid #ddd;
}

.w870 {
  margin-top: 30px;
}

.border03 {
  margin-top: -15px;
}

.border02_tag em {
  left: 87px;
  color: #0082ba;
}

.iask05a ul {
  height: 40px;
}

.border02_tag ol {
  width: 232px;

  /*border-bottom:  #0082ba;*/
}
</style>
